<template>
    <div class="sort">
        <div class="sort-left">
            <router-link to="/">
                <img src="image/Sort/左箭头.png" alt="">
            </router-link>
        </div>
        <div class="sort-center">
            <div class="center-left">
                <img src="image/Sort/搜索.png" alt="">
            </div>
            <input type="text" placeholder="东魁杨梅">
        </div>
        <div class="sort-rigth">
            <router-link to="/shop">
                <img src="image/Sort/购物车.png" alt="">
            </router-link>
        </div>  
    </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .sort{
        width: 100%;
        height: 0.3rem;
        background-color: #faf6f7;
        display: flex;
        /* margin-bottom: 0.02rem; */
        z-index: 2;
    }
    .sort-left{
        width: 10%;
        height: 100%;
        /* background-color: bisque; */
    }
    .sort-left>a>img{
        width: 0.1rem;
        height: 0.19rem;
        margin-left: 0.175rem;
        margin-top: 0.05rem;
    }
    .sort-center{
        width: 85%;
        height: 100%;
        /* background-color: azure; */
        display: flex;
    }
    .center-left{
        width: 15%;
        height: 0.29rem;
        /* background-color: blueviolet; */
        border: 0.01rem solid #48b0ff;
        border-radius: 100px 0px 0px 100px;
        border-right: none;
    }
    .center-left>img{
        width: 0.28rem;
        height: 0.28rem;
        margin-left: 0.1rem;
    }
    .sort-center>input{
        width: 100%;
        height: 0.29rem;
        background-color: #faf6f7;
        border: 0.01rem solid #48b0ff;
        border-radius: 0px 100px 100px 0px;
        border-left: none;
        outline: none;
    }
    .sort-rigth{
        width: 10%;
        height: 100%;
        /* background-color: greenyellow; */
    }
    .sort-rigth>a>img{
        width: 0.19rem;
        height: 0.2rem;
        margin-left: 0.1rem;
        margin-top: 0.05rem;
    }
</style>